import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { DNavBar, DItemError } from '@/components'
import { AtList, AtListItem } from "taro-ui"
import http from '@/api'
import './choosecar.scss'

export default class choosecarBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
            key: "",
            list: [],
            itemlist: []
        }
    }

    componentWillMount() {
        let { key } = this.$router.params
        this.setState({
            key
        }, () => {
            this.getListInfo()
        })
        sessionStorage.removeItem("brandList")
    }

    getListInfo() {
        let { key, list } = this.state
        http.getCarData().then(data => {
            data.map((item, i) => {
                if (i === +key) {
                    item.seriesVOS.map(_item => {
                        list.push({
                            title: _item.carSeries,
                            id: _item.carSeriesId
                        })

                    })
                }
            })

            this.setState({
                list,
                itemlist: data
            })
        })
    }

    onHandleClick(i) {
        let { key, itemlist, list } = this.state
        let brandInfo = {
            carBrand: itemlist[key].carBrand,
            carBrandId: itemlist[key].carBrandId,
            carBrandLogo: itemlist[key].carBrandLogo
        }
        let carinfo = Object.assign({}, brandInfo, list[i])
        sessionStorage.setItem("brandList", JSON.stringify(carinfo))
        Taro.navigateBack({
            delta: 2
        })
    }

    render() {
        const { list } = this.state
        return (
            <View className="b_choosecar">
                <DNavBar title='选择车系'></DNavBar>
                <View className="b_choosecar__box">
                    <View className="b_choosecar__content">
                        {
                            list.length > 0 && <AtList>
                                {
                                    list && list.map((item, i) => {
                                        return <AtListItem key={i} onClick={this.onHandleClick.bind(this, i)} title={item.title} arrow='right' />
                                    })
                                }
                            </AtList>
                        }
                        {
                            list.length === 0 && <DItemError></DItemError>
                        }
                    </View>
                </View>
            </View>
        )
    }
}
